<template>
  <view class="scale-container">
    <view class="scale-header">
      <text class="scale-title">一般资料调查问卷</text>
      <text class="scale-subtitle">请填写您的基本信息</text>
    </view>
    
    <view class="form-container">
      <uni-forms ref="form" :model="formData" :rules="rules">
        <!-- 姓名 -->
        <uni-forms-item label="姓名" name="name" required>
          <uni-easyinput v-model="formData.name" placeholder="请输入您的姓名" />
        </uni-forms-item>
        
        <!-- 性别 -->
        <uni-forms-item label="性别" name="gender" required>
          <uni-data-select v-model="formData.gender" :localdata="genderOptions" placeholder="请选择性别" />
        </uni-forms-item>
        
        <!-- 年龄 -->
        <uni-forms-item label="年龄" name="age" required>
          <uni-easyinput v-model="formData.age" type="number" placeholder="请输入您的年龄" />
        </uni-forms-item>
        
        <!-- 职业 -->
        <uni-forms-item label="职业" name="profession" required>
          <uni-data-select v-model="formData.profession" :localdata="professionOptions" placeholder="请选择您的职业" />
        </uni-forms-item>
        
        <!-- 工作年限 -->
        <uni-forms-item label="工作年限" name="workYears" required>
          <uni-data-select v-model="formData.workYears" :localdata="workYearsOptions" placeholder="请选择工作年限" />
        </uni-forms-item>
        
        <!-- 学历 -->
        <uni-forms-item label="学历" name="education" required>
          <uni-data-select v-model="formData.education" :localdata="educationOptions" placeholder="请选择学历" />
        </uni-forms-item>
        
        <!-- 婚姻状况 -->
        <uni-forms-item label="婚姻状况" name="maritalStatus" required>
          <uni-data-select v-model="formData.maritalStatus" :localdata="maritalStatusOptions" placeholder="请选择婚姻状况" />
        </uni-forms-item>
        
        <!-- 联系方式 -->
        <uni-forms-item label="联系方式" name="contact" required>
          <uni-easyinput v-model="formData.contact" placeholder="请输入您的联系方式" />
        </uni-forms-item>
      </uni-forms>
      
      <view class="form-actions">
        <button class="submit-btn" @click="submitForm">提交问卷</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        gender: '',
        age: '',
        profession: '',
        workYears: '',
        education: '',
        maritalStatus: '',
        contact: ''
      },
      rules: {
        name: {
          rules: [{ required: true, errorMessage: '请输入姓名' }]
        },
        gender: {
          rules: [{ required: true, errorMessage: '请选择性别' }]
        },
        age: {
          rules: [{ required: true, errorMessage: '请输入年龄' }]
        },
        profession: {
          rules: [{ required: true, errorMessage: '请选择职业' }]
        },
        workYears: {
          rules: [{ required: true, errorMessage: '请选择工作年限' }]
        },
        education: {
          rules: [{ required: true, errorMessage: '请选择学历' }]
        },
        maritalStatus: {
          rules: [{ required: true, errorMessage: '请选择婚姻状况' }]
        },
        contact: {
          rules: [{ required: true, errorMessage: '请输入联系方式' }]
        }
      },
      genderOptions: [
        { value: 'male', text: '男' },
        { value: 'female', text: '女' }
      ],
      professionOptions: [
        { value: 'doctor', text: '医生' },
        { value: 'nurse', text: '护士' },
        { value: 'pharmacist', text: '药师' },
        { value: 'technician', text: '技师' },
        { value: 'other', text: '其他' }
      ],
      workYearsOptions: [
        { value: '0-1', text: '0-1年' },
        { value: '1-3', text: '1-3年' },
        { value: '3-5', text: '3-5年' },
        { value: '5-10', text: '5-10年' },
        { value: '10+', text: '10年以上' }
      ],
      educationOptions: [
        { value: 'highschool', text: '高中及以下' },
        { value: 'college', text: '大专' },
        { value: 'bachelor', text: '本科' },
        { value: 'master', text: '硕士' },
        { value: 'doctor', text: '博士' }
      ],
      maritalStatusOptions: [
        { value: 'single', text: '未婚' },
        { value: 'married', text: '已婚' },
        { value: 'divorced', text: '离异' },
        { value: 'widowed', text: '丧偶' }
      ]
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '一般资料调查问卷'
    })
  },
  methods: {
    submitForm() {
      this.$refs.form.validate().then(res => {
        console.log('表单数据：', this.formData)
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
        // 这里可以调用API保存数据
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }).catch(err => {
        console.log('表单验证失败：', err)
      })
    }
  }
}
</script>

<style scoped>
.scale-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.scale-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  text-align: center;
}

.scale-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
}

.scale-subtitle {
  color: #ffffff;
  font-size: 14px;
  opacity: 0.9;
}

.form-container {
  padding: 20px;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

.submit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 25px;
  padding: 12px 40px;
  font-size: 16px;
  font-weight: bold;
}

.submit-btn:active {
  opacity: 0.8;
}
</style>


